<!--
内容：查看招聘信息
作者：BOBO
日期： 20170707
-->
<template>
    <div id="views-recruitManage-viewJobDetails">
        <Breadcrumb separator=">">
            <Breadcrumb-item href="/">首页</Breadcrumb-item>
            <Breadcrumb-item href="/components/breadcrumb">招聘职位</Breadcrumb-item>
            <Breadcrumb-item>高级研发工程师（PHP）</Breadcrumb-item>
        </Breadcrumb>

        <section class="view-job-details-wrap">
            <section class="vjd-headDetail">
                <h3 class="vjd-title">
                    <strong>高级研发工程师（PHP）</strong>
                    <span class="tips f-red">急聘</span>
                    <span class="tips f-green">内部推荐</span>
                    <span class="tips f-blue">招聘中</span>
                </h3>
                <p class="vjd-num"><span class="after-circle">新产品中心</span> <span>HRSAAS产品经理（对内招聘数名）</span></p>
                <p class="vjd-publish"><span class="publish-time">发布日期：2017年9月23日</span> <span class="publish-way">发布渠道：乐聘</span></p>

                <div class="edit-wrap">
                    <a href="javascript:;" class="js-editVjdDetails"><i></i>编辑</a>
                    <a href="javascript:;" class="js-closeVjdDetails"><i></i>关闭职位</a>
                </div>
            </section>

            <section class="zp-reasons-wrap">
                <div class="zp-reasons-box">
                    <div class="zp-now-status">
                        <span class="demand">需求 <strong>3</strong></span>
                        <span class="admitted">已入职 <strong>1</strong></span>
                        <span class="pending-entry">待入职 <strong>2</strong></span>
                    </div>

                    <p class="zp-reason-cont">招聘原因：<span>团队扩编，增加业务规模</span></p>
                </div>
            </section>

            <section class="vjd-detail-wrap">
                <Tabs value="name1">
                    <Tab-pane label="职位信息" name="name1">
                        <Row>
                            <Col span="8">
                                <div class="col-item">
                                    <span class="col-tit">薪资</span>
                                    <span class="col-cont">150000</span>
                                </div>
                            </Col>
                            <Col span="8">
                                <div class="col-item">
                                    <span class="col-tit">期望到岗</span>
                                    <span class="col-cont">2017-10-16</span>
                                </div>
                            </Col>
                            <Col span="8">
                                <div class="col-item">
                                    <span class="col-tit">工作性质</span>
                                    <span class="col-cont">全职</span>
                                </div>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="8">
                                <div class="col-item">
                                    <span class="col-tit">工作年限</span>
                                    <span class="col-cont">不限</span>
                                </div>
                            </Col>
                            <Col span="8">
                                <div class="col-item">
                                    <span class="col-tit">最低学历</span>
                                    <span class="col-cont">本科及以上</span>
                                </div>
                            </Col>
                            <Col span="8">
                                <div class="col-item">
                                    <span class="col-tit">第二语言</span>
                                    <span class="col-cont">英语</span>
                                </div>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="8">
                                <div class="col-item">
                                    <span class="col-tit">年龄</span>
                                    <span class="col-cont">不限</span>
                                </div>
                            </Col>
                            <Col span="8">
                                <div class="col-item">
                                    <span class="col-tit">性别</span>
                                    <span class="col-cont">女</span>
                                </div>
                            </Col>
                            <Col span="8">

                            </Col>
                        </Row>
                        <Row>
                            <Col span="24">
                                <div class="col-item clearfix">
                                    <span class="col-tit">企业福利</span>
                                    <span class="col-cont">
                                        <em class="grey-bg">五险一金</em>
                                        <em class="grey-bg">法定节假</em>
                                        <em class="grey-bg">生日惊喜礼包</em>
                                    </span>
                                </div>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="24">
                                <div class="col-item clearfix">
                                    <span class="col-tit">地址</span>
                                    <span class="col-cont">
                                        朝阳区广渠路66号
                                    </span>
                                </div>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="24">
                                <div class="col-item clearfix">
                                    <span class="col-tit">职位描述</span>
                                    <div class="col-cont col-duty">
                                        <p>
                                            岗位职责：<br/>
                                            1、按照要求完成工作<br/>
                                            2、按照要求完成工作<br/>
                                            3、按照要求完成工作
                                        </p>
                                        <p>
                                            任职资格：<br/>
                                            1、能接受加班、出差<br/>
                                            2、3年以上互联网行业工作经历<br/>
                                            3、英语较好
                                        </p>
                                    </div>
                                </div>
                            </Col>
                        </Row>
                    </Tab-pane>
                    <Tab-pane label="应聘人员" name="name2">
                        <Table stripe :columns="applyTit" :data="applyData"></Table>
                    </Tab-pane>
                    <Tab-pane label="操作记录" name="name3">
                        <Table stripe :columns="editTit" :data="editData"></Table>
                    </Tab-pane>
                </Tabs>
            </section>
        </section>
    </div>
</template>

<script>
    import fullCalendar from 'vue-fullcalendar'

    export default {
        components: {
            fullCalendar
        },
        data: function() {
            return {
                applyTit: [
                    {
                        title: '应聘者',
                        key: 'name'
                    },
                    {
                        title: '工作年限',
                        key: 'year'
                    },
                    {
                        title: '学历',
                        key: 'education',
                        className: 'education-tit',
                        sortable: 'true',
                        sortMethod: function(a, b, type){
                            var eduArr = ['高中','大专','本科','研究生','博士'];
                            for(let i = 0, eduArrLen = eduArr.length; i < eduArrLen; i++){
                                if(a === eduArr[i]){
                                    a = i;
                                }
                                if(b === eduArr[i]){
                                    b = i;
                                }
                            }
                            if(type === 'desc'){
                                return a - b;
                            }else{
                                return b - a;
                            }
                        }
                    },
                    {
                        title: '申请时间',
                        key: 'applytime',
                        sortable: 'true'
                    },
                    {
                        title: '简历状态',
                        key: 'status'
                    },
                    {
                        title: '备注',
                        key: 'remarks'
                    }
                ],
                applyData: [
                    {
                        name: 'Gary French',
                        year: 4,
                        education: '本科',
                        applytime: '2017-02-11 12:49',
                        status: '待筛选',
                        remarks: '123559855699897256'
                    },
                    {
                        name: 'bbbdh',
                        year: 4,
                        education: '大专',
                        applytime: '2017-02-13 14:49',
                        status: '待筛选',
                        remarks: '123559855699897256'
                    },
                    {
                        name: 'nndfgdhs fdh',
                        year: 4,
                        education: '研究生',
                        applytime: '2017-02-11 17:49',
                        status: '待筛选',
                        remarks: '123559855699897256'
                    },
                    {
                        name: 'yyu ueutu',
                        year: 4,
                        education: '博士',
                        applytime: '2017-01-13 10:49',
                        status: '待筛选',
                        remarks: '123559855699897256'
                    }
                ],
                editTit: [
                    {
                        title: '操作人',
                        key: 'editname'
                    },
                    {
                        title: '操作时间',
                        key: 'edittime'
                    },
                    {
                        title: '所有操作',
                        key: 'alledit',
                        filters: [
                            {
                                label: '所有',
                                value: 1
                            },
                            {
                                label: '创建',
                                value: 2
                            },
                            {
                                label: '修改',
                                value: 3
                            },
                            {
                                label: '删除',
                                value: 4
                            }
                        ],
                        filterMultiple: false,
                        filterMethod (value, row) {
                            if (value === 1) {
                                return row.alledit === '创建' || row.alledit === '修改' || row.alledit === '删除';
                            } else if (value === 2) {
                                return row.alledit === '创建';
                            }else if (value === 3) {
                                return row.alledit === '修改';
                            }else if (value === 4) {
                                return row.alledit === '删除';
                            }
                        }
                    },
                    {
                        title: '备注',
                        key: 'remarks'
                    }
                ],
                editData: [
                    {
                        editname: 'yoyo',
                        edittime: '2017-02-13 15:49',
                        alledit: '修改',
                        remarks: '更新职位'
                    },
                    {
                        editname: 'BOBO',
                        edittime: '2017-02-13 15:49',
                        alledit: '删除',
                        remarks: '更新职位'
                    },
                    {
                        editname: 'HHHAH',
                        edittime: '2017-02-13 15:49',
                        alledit: '修改',
                        remarks: '更新职位'
                    },
                    {
                        editname: 'yoyo',
                        edittime: '2017-02-13 15:49',
                        alledit: '创建',
                        remarks: '更新职位'
                    },
                    {
                        editname: 'yoyo',
                        edittime: '2017-02-13 15:49',
                        alledit: '创建',
                        remarks: '更新职位'
                    }
                ]
            }
        },
        methods: {

        },
        computed: {

        }
    }
</script>

<style scoped lang="scss">
    strong{ font-weight: normal;}
    i, em{ font-style: normal;}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
    .clearfix{display:inline-block;}* html .clearfix{height:1%;}.clearfix{display:block;}
    .view-job-details-wrap{ padding: 20px 0; min-width: 900px;
        .vjd-headDetail{ position: relative; z-index: 1; margin-bottom: 10px; padding: 0 30px;
            .edit-wrap{ position: absolute; z-index: 2; top: 0; right: 30px;
                a{ position: relative; z-index: 1; padding-left: 20px; margin-left: 20px; display: inline-block; color: #4990E2; font-size: 12px; vertical-align: middle;
                    i{ position: absolute; z-index: 2; top: 0; left: 0;}
                }
            }
            .vjd-title{ height: 30px;
                strong{ display: inline-block; color: #354052; font-size: 18px; font-weight: normal; vertical-align: middle;}
                span{ display: inline-block; margin: 0 5px; padding: 0 5px; height: 20px; line-height: 20px; font-size: 12px; font-weight: normal; border-radius: 2px; vertical-align: middle;
                    &.f-red{ color: #EB6751; border: 1px solid #FDDEDE;}
                    &.f-green{ color: #2FBF6F; border: 1px solid #BDECD2;}
                    &.f-blue{ color: #4990E2; border: 1px solid #D1E6FE;}
                }
            }
            .vjd-num{ height: 25px; line-height: 25px; color: #666; font-size: 0;
                span{ display: inline-block; vertical-align: middle; font-size: 12px;
                    &.after-circle{ position: relative; z-index: 1; padding-right: 20px;
                        &:after{ position: absolute; z-index: 2; top: 14px; right: 10px; content: ''; width: 0; height: 0; border: 1px solid #666; border-radius: 1px;}
                     }
                }
            }
            .vjd-publish{ height: 25px; line-height: 25px; color: #c5c5c5; font-size: 0;
                span{ margin-right: 10px; display: inline-block; vertical-align: middle; font-size: 12px;}
            }
        }

        .zp-reasons-wrap{ margin-bottom: 10px; padding: 0 30px;
            .zp-reasons-box{ padding: 0 20px; background: #fafafa; border-radius: 3px;
                .zp-now-status{ padding: 10px 0; height: 50px; border-bottom: 1px solid #eee; font-size: 0; color: #B0BDC9;
                    span{ display: inline-block; height: 30px; line-height: 30px; margin-right: 70px; font-size: 14px; vertical-align: middle;}
                    strong{ display: inline-block; padding-left: 10px; font-size: 24px; color: #AFBCC9; vertical-align: middle;}
                }
                .zp-reason-cont{ padding: 10px 0; line-height: 30px; color: #A4B0BD; font-size: 13px;}
            }
        }

        .vjd-detail-wrap{ padding: 0 30px; min-height: 300px;
            .col-item{ position: relative; z-index:1; padding-left: 80px;
                span{ display: block; height: 40px; line-height: 40px;}
                .col-tit{ position: absolute; z-index:2; top:0; left:0; width:80px; text-align:right; color: #999; font-size: 12px;}
                .col-cont{ padding: 5px 0 5px 10px; line-height: 30px; width: 100%; color: #000; font-size: 13px;
                    &.col-duty{ letter-spacing: 0.86px;
                        p{ margin-bottom: 10px;}
                     }
                    .grey-bg{ display: inline-block; padding: 0 10px; height: 30px; line-height: 30px; background: #f5f5f5; border: 1px solid #EEEEEE; border-radius: 2px;}
                }
            }
        }

    }

</style>
